<template>
  <div>
    
    <el-card class="box-card Top">
      <el-alert
        title="注意:只允许为第三级分类设置参数"
        type="warning"
        :closable="false"
        effect="dark"
        show-icon
      >
      </el-alert>
      <div class="Top">
        选择商品分类：
        <el-cascader
          v-model="value"
          :options="options"
          :props="props"
          @change="handleChange"
        ></el-cascader>
      </div>
      <el-tabs
        type="border-card"
        class="Top"
        v-model="TabName"
        @tab-click="DianJi"
      >
        <el-button type="primary" class="Bottom" :disabled="Buts" @click="Addv"
          >添加参数</el-button
        >
        <el-tab-pane label="动态参数" name="many">
          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column type="expand">
              <template slot-scope="scope">
                <div>
                  <el-tag
                    :key="index"
                    v-for="(tag, index) in scope.row.attr_vals"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(index, scope.row)"
                    class="tag"
                  >
                    {{ tag }}
                  </el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="scope.row.inputVisible"
                    v-model="scope.row.inputValue"
                    ref="saveTagInput"
                    size="small"
                    style="width: 80px"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm(scope.row)"
                  >
                  </el-input>
                  <el-button
                    v-else
                    class="button-new-tag"
                    size="small"
                    @click="showInput(scope.row)"
                    >+ New Tag</el-button
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column type="index" label="#"> </el-table-column>
            <el-table-column label="参数名称" prop="attr_name">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  icon="el-icon-edit"
                  type="primary"
                  @click="Editv(scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="DEL(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="静态参数" name="only">
          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column type="expand">
              <template slot-scope="scope">
                <div>
                  <el-tag
                    :key="index"
                    v-for="(tag, index) in scope.row.attr_vals"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(index, scope.row)"
                    class="tag"
                  >
                    {{ tag }}
                  </el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="scope.row.inputVisible"
                    v-model="scope.row.inputValue"
                    ref="saveTagInput"
                    size="small"
                    style="width: 80px"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm(scope.row)"
                  >
                  </el-input>
                  <el-button
                    v-else
                    class="button-new-tag"
                    size="small"
                    @click="showInput(scope.row)"
                    >+ New Tag</el-button
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column type="index" label="#"> </el-table-column>
            <el-table-column label="参数名称" prop="attr_name">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  icon="el-icon-edit"
                  type="primary"
                  @click="Editv(scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="DEL(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <el-dialog title="添加动态参数" :visible.sync="Adddiang">
        <el-form :model="forms">
          <el-form-item label="动态参数" label-width="80px">
            <el-input v-model="forms.attr_name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="Adddiang = false">取 消</el-button>
          <el-button type="primary" @click="ADD">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 编辑对话框 -->
      <el-dialog title="修改动态参数" :visible.sync="isEdits">
        <el-form :model="forms">
          <el-form-item label="动态参数" label-width="80px">
            <el-input v-model="forms.attr_name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isEdits = false">取 消</el-button>
          <el-button type="primary" @click="Editc">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import _ from 'lodash'
import {
  paramsDelete,
  paramsEdit,
  goodtypeadd,
  
  FenLei,
  goodsDataAddCanApi
} from '@/http/api'
export default {
  name: '',
  components: {},
  computed: {
    valLength() {
      return this.value.length
    },
    IDLength() {
      return this.value[this.value.length - 1]
    }
  },
  data() {
    return {
      Adddiang: false,
      isEdits: false,
      forms: {
        attr_name: ''
      },
      // 添加参数按钮开关
      Buts: true,
      // Tag标签
      inputVisible: false,
      inputValue: '',
      TabName: 'many',
      // 三级联动
      value: [],
      options: [],
      props: {
        expandTrigger: 'hover',
        label: 'cat_name',
        children: 'children',
        value: 'cat_id'
      },
      //   表格
      tableData: []
    }
  },
  created() {
    this.getlist()
  },
  mounted() {},
  methods: {
    async getlist() {
      const res = await FenLei()
      console.log(res)
      this.options = res
      this
    },
    // 点击添加参数按钮
    Addv() {
      this.Adddiang = true
      this.forms = {}
    },
    // 点击Tab栏
    async DianJi() {
      if (this.valLength !== 3) {
        // this.$message.error("请选择三级分类");
        return false
      } else {
        this.GetGoods()
      }
    },
    // 删除
    async DEL(row) {
      let dels
      try {
        dels = await this.$confirm(
          '此操作将永久删除该文件, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
      } catch (error) {
        dels = error
      }

      if (dels === 'confirm') {
        await paramsDelete(this.IDLength, row.attr_id)
        this.GetGoods()
      } else if (dels === 'cancel') {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    // 编辑完成
    async Editc() {
      //调后台更新接口
      await paramsEdit(this.IDLength, this.forms.attr_id, {
        attr_name: this.forms.attr_name,
        attr_sel: this.TabName,
        attr_vals: this.forms.attr_vals
      })
      this.isEdits = false
      this.GetGoods()
    },
    // 打开编辑
    async Editv(row) {
      //  this.forms = {};
      this.isEdits = true
      this.forms.attr_name = row.attr_name
      this.forms.attr_id = row.attr_id
      this.forms.attr_vals =
        row.attr_vals.length > 0 ? row.attr_vals.join(',') : ''
    },
    // 添加参数
    async ADD() {
      await goodtypeadd(this.IDLength, {
        attr_name: this.forms.attr_name,
        attr_sel: this.TabName
      })
      this.Adddiang = false
      this.GetGoods()
    },
    // 获取分类参数列表
    async GetGoods() {
      if (this.TabName === 'many') {
        const res = await goodsDataAddCanApi(this.IDLength, 'many')
        // console.log(res.attr_vals)
        res.forEach((item) => {
          item.inputVisible = false
          item.inputValue = ''
          item.attr_vals =
            item.attr_vals.length > 0 ? item.attr_vals.split(',') : []
          console.log(item.attr_vals)
        })
        this.tableData = res
      } else if (this.TabName === 'only') {
        const res = await goodsDataAddCanApi(this.IDLength, 'only')
        res.forEach((item) => {
          item.inputVisible = false
          item.inputValue = ''
          item.attr_vals =
            item.attr_vals.length > 0 ? item.attr_vals.split(',') : []
        
        })
        console.log(res)
        this.tableData = res
      }
    },
    // Tag标签事件
    async handleClose(index, row) {
      // console.log(index, row);
      row.attr_vals.splice(index, 1)
      const res = await paramsEdit(this.IDLength, row.attr_id, {
        attr_name: row.attr_name,
        attr_sel: this.TabName,
        attr_vals: row.attr_vals.length > 0 ? row.attr_vals.join(',') : ''
      })
      console.log(res)
      this.getlist()
    },

    showInput(item) {
      console.log(item)
      item.inputVisible = true
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus()
        console.log('触发了')
      })
    },
    // 添加参数
    async handleInputConfirm(row) {
      const inputValue = row.inputValue
      if (inputValue.trim().length > 0) {
        row.attr_vals.push(inputValue)
      }
      row.inputVisible = false
      row.inputValue = ''
      await paramsEdit(this.IDLength, row.attr_id, {
        attr_name: row.attr_name,
        attr_sel: this.TabName,
        attr_vals: row.attr_vals.length > 0 ? row.attr_vals.join(',') : ''
      })
      // this.GetGoods();
    },
    // 三级联动
    handleChange(value) {
      console.log(value)

      if (this.valLength !== 3) {
        this.Buts = true
        this.$message.error('只允许设置三级分类')
        this.tableData = null
        return false
      } else {
        this.Buts = false
        this.GetGoods()
      }
    }
  }
}
</script>
<style scoped lang='scss'>
.Top {
  margin-top: 30px;
}
.Bottom {
  margin-bottom: 30px;
}
.tag {
  margin: 10px;
}
</style>
